<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>实例操作- 手风琴</title>
  <style type="text/css">
  * {
    padding: 0;
    margin: 0;
    box-sizing: content-box;
  }
  body {
    padding: 30px;
  }
  .slide {
    width: 300px;
    display: flex;
    flex-direction: column;
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); */
  }
  .slide dt {
    height: 30px;
    background: #34495e;
    color: white;
    display: flex;
    align-items: center;
    padding-left: 10px;
    cursor: pointer;
  }
  .slide dt:first-of-type {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .slide dd {
    height: 100px;
    background: #f1c40f;
    overflow: hidden;
  }
  .slide dd div {
    padding: 10px;
  }
  .slide dd:last-of-type {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>实例操作- 手风琴</h1>
  </div>

  <div class="slide s1">
    <dt>后盾人</dt>
    <dd>
      <div>houdunren.com</div>
    </dd>
    <dt>后盾CMS</dt>
    <dd>
      <div>hdcms1.com</div>
    </dd>
    <dt>百度</dt>
    <dd>
      <div>baidu.com</div>
    </dd>
    <dt>腾讯</dt>
    <dd>
      <div>qq.com</div>
    </dd>
  </div>
  <script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
  <script type="text/javascript">
    class Animation {
      constructor(el, opts = {}) {
       let defaults = {
        timeout: 20,
        step: 2,
        isShow: true,
       }
       // 配置项
       let options = Object.assign({}, defaults, opts)

       this.el = el ;
       this.defaultHeight = this.height
       this.isShow = options.isShow 
       this.timeout = options.timeout        
       this.step = options.step        
     }
     hide(callback) {
       this.isShow = false ;
       let id = setInterval(() => {
        if(this.height <= 0) {
          clearInterval(id)
          callback && callback()
        }
          // --this.height 
          this.height -=  this.step
          
        }, this.timeout)
     }
     show(callback) {
      this.isShow = true
      let id = setInterval(() => {
        if(this.height >= this.defaultHeight) {
          clearInterval(id);
          callback && callback()
        }
        this.height += this.step;

      }, this.timeout)
    }

    set height(height) {
      this.el.style.height = height + 'px'
    }
    get height() {
      return Number.parseInt(window.getComputedStyle(this.el).height)
    }

  }

  class Slide {
    constructor(el) {
      this.el = document.querySelector(el)
      this.links = this.el.querySelectorAll('dt')
      // 借用数组的map函数，进行数组映射出新数组
      this.panels = [].map.call(this.el.querySelectorAll('dd'), (item, idx, arr) => {
        console.log(item, idx, arr)
      })
      this.bind()
    }

    // 绑定事件
    bind() {
      this.links.forEach((item,i) => {
        var that = this ;
        item.addEventListener('click', function(){
          that.action(i)
        }); 
      })
    }

    action(idx) {
      console.log('idx = ', idx)
      
    }
  }


  // let el = document.querySelector('.s1')
  // let hd = new Animation(el, {timeout: 20})
  // 
  
  let hd = new Slide('.s1')
   
</script>
</body>
</html>